<template>
  <div class="main-container">
    <div class="header">
      <h1>失主确认</h1>
      <div class="filter">
        <el-breadcrumb separator=" | ">
          <el-breadcrumb-item @click.native="setFindStatus(0)" class="el-bread" :class="{'active': !isActive}">待找回</el-breadcrumb-item>
          <el-breadcrumb-item @click.native="setFindStatus(1)" class="el-bread" :class="{'active': isActive}">已找回</el-breadcrumb-item>
        </el-breadcrumb>
        <label>过滤：</label>
        <select v-model="selectedFilter">
          <option value="lastMonth">最近一个月</option>
          <option value="lastWeek">最近一周</option>
          <option value="all">全部</option>
        </select>
      </div>
    </div>
    <div class="info">
      <div class="info-table">
        <table>
          <thead>
            <tr>
              <th style="width: 120px;">姓名</th>
              <th style="width: 240px;">手机号</th>
              <th style="width: 280px;">短信发送时间</th>
              <th style="width: 100px;">类型</th>
              <th style="width: 280px;">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in currentPageData" :key="index">
              <td>{{ item.name }}</td>
              <td>{{ item.phone }}</td>
              <td>{{ formattedDate(item.smsTime) }}</td>
              <td>{{ item.type }}</td>
              <td>
                <div class="buttons">
                  <el-button type="primary" @click="confirmAction(item)" class="el-dropdown">查看</el-button>
                  <el-dropdown @command="(command) => handleCommand(command, item)" trigger="click">
                    <el-button type="primary" class="el-dropdown">
                      更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="a">查看短信发送内容</el-dropdown-item>
                      <el-dropdown-item command="b">再次发送短信</el-dropdown-item>
                      <el-dropdown-item command="c">删除记录</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="footer">
      <el-button type="primary" :disabled="currentPage === 1" @click="changePage(currentPage - 1)" icon="el-icon-arrow-left"></el-button>
      <span>&emsp;第 {{ currentPage }}/{{ totalPages }}页&emsp;</span>
      <el-button type="primary" :disabled="currentPage === totalPages" @click="changePage(currentPage + 1)" icon="el-icon-arrow-right"></el-button>
    </div>
    <el-dialog
  title="失主认领"
  :visible.sync="dialogVisible"
  width="30%"
  top="30vh"
>
  <el-form :model="confirm">
    <el-form-item :label="`${confirm.type}号码:`">
      <el-input type="textarea" :value="confirm.num" readonly rows="2"></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取消</el-button>&emsp;
    <el-button type="primary" slot="reference" @click="claim(confirm)">{{ text }}</el-button>
  </span>
</el-dialog>
<el-dialog
  title="查看短信内容"
  :visible.sync="dialogVisible1"
  width="30%"
  top="30vh"
>
  <el-form :model="confirm">
    <el-form-item label="短信内容">
      <el-input type="textarea" :value="confirm.smscontent" readonly rows="2"></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" slot="reference" @click="dialogVisible1 = false">确认</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import moment from 'moment';
import axios from 'axios';
export default {
  data() {
    return {
      text:'',
      selectedFilter: 'all',
      isFind: 0,
      isActive: false,
      currentPage: 1,
      pageSize: 5, // 每页显示的条数
      data: [],
      dialogVisible:false,
      dialogVisible1:false,
      confirm:{
        smsTime:'',
        type:'',
        num:'',
        isfind:0,
        smscontent:''
      }
    };
  },
  methods: {
    confirmAction(student) {
      console.log(student.isfind);
      this.confirm.smsTime=this.formattedDate(student.smsTime);
      this.confirm.type=student.type;
      this.confirm.num=student.num;
      this.confirm.isfind=student.isfind;
      if(student.isfind===0){
        this.text="认领";
      }else if(student.isfind===1){
        this.text="回退";
      }
      this.dialogVisible=true;
    },
    viewSmsContent(student){
      this.confirm.smscontent=student.smscontent;
      this.dialogVisible1=true;
    },
    deleteRecord(confirm){
      // 调用后端 API
      console.log(this.formattedDate(confirm.smsTime));
      axios.delete('/api/student/delete', {params: {
          smsTime: this.formattedDate(confirm.smsTime),
          type: confirm.type
        }})
        .then(response => {
          // 处理后端返回的响应
          this.$message.success('删除成功');
          // 根据返回结果做相应的提示或操作
          this.fetchData(); // 切换状态时重新获取数据
        })
        .catch(error => {
          this.$message.error('系统操作错误');
        }); 
    },
    claim(confirm){
      // 调用后端 API
      console.log(confirm.smsTime);
      console.log(confirm.type);
      console.log(confirm.isfind);
      axios.post('/api/student/find', {
        smsTime:confirm.smsTime,
        type:confirm.type,
        isfind:confirm.isfind
      },{headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }})
        .then(response => {
          // 处理后端返回的响应
          this.dialogVisible=false;
          this.$message.success(this.text+'成功');
          // 根据返回结果做相应的提示或操作
          this.fetchData(); // 切换状态时重新获取数据
        })
        .catch(error => {
          this.$message.error('系统操作错误');
        }); 
    },
    handleCommand(command, student) {
      switch (command) {
        case 'a':
          this.viewSmsContent(student); // 查看短信发送内容的方法
          break;
        case 'b':
          this.resendSms(student); // 再次发送短信的方法
          break;
        case 'c':
          this.deleteRecord(student); // 删除记录的方法
          break;
      }
    },
    changePage(page) {
      if (page < 1 || page > this.totalPages) return;
      this.currentPage = page;
    },
    setFindStatus(status) {
      this.isActive = status;
      this.isFind = status; // 更新 isFind 状态
      this.currentPage = 1; // 重置页码
      this.fetchData(); // 切换状态时重新获取数据
    },
    fetchData() {
      // 从 API 获取数据
      axios.get('/api/student/get-home-data').then(response => {
        this.data = response.data;
        this.$message.success('加载成功');
      }).catch(error => {
        console.error('获取数据失败', error);
        this.$message.error('获取数据失败');
      });
    },
    formattedDate(datetime) {
      let date = new Date(datetime);
  // 将时间转换为北京时间（UTC+8）
  date.setHours(date.getHours() + 8);
  return moment(date).format('YYYY-MM-DD HH:mm:ss');  // 本地时间字符串
    },
  },
  computed: {
    totalPages() {
      return Math.ceil(this.filteredData.length / this.pageSize);
    },
    currentPageData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.filteredData.slice(start, end);
    },
    filteredData() {
      let data = this.data.filter(item => item.isfind === this.isFind); // 根据 isFind 状态过滤数据
      if (this.selectedFilter === 'lastMonth') {
        const lastMonth = new Date();
        lastMonth.setMonth(lastMonth.getMonth() - 1);
        data = data.filter(item => new Date(item.smsTime) >= lastMonth);
      } else if (this.selectedFilter === 'lastWeek') {
        const lastWeek = new Date();
        lastWeek.setDate(lastWeek.getDate() - 7);
        data = data.filter(item => new Date(item.smsTime) >= lastWeek);
      }
      return data;
    },
  },
  mounted() {
    this.fetchData(); // 组件加载时获取初始数据
  },
};
</script>


<style scoped>
.main-container {
  padding: 20px;
  background-color: #f0f5ff;
}

h1 {
  font-size: 64px;
  font-weight: bold;
}
.info-table table {
  width: 80%;
  border-collapse: collapse;
  margin: auto;
}

.info-table th, .info-table td {
padding: 10px;
text-align: left;
}

.info-table th {
background-color: #f2f2f2;
color: #4578dc;
}
.filter {
  margin-right: -1000px;
}
select {
  margin-left: 10px;
  padding: 5px;
  font-size: 14px;
  border-radius: 5px;
  border: 1px solid #ccc;
}
.buttons {
  text-align: left;
  display: flex;
  align-items: center;
}
.el-dropdown {
  margin-right: 10px;
}
.footer {
font-size: 24px;
position: fixed;   /* 固定位置 */
bottom: 60px;      /* 离底部 60px */
left: 50%;         /* 水平居中 */
transform: translateX(-50%);  /* 精确居中 */
background-color: #fff;   /* 背景色，避免与内容重叠 */
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  /* 为按钮添加阴影效果 */
z-index: 10;  /* 确保按钮在最上层 */
}
.el-bread {
cursor: pointer;
font-size: 32px;
transition: all 0.3s ease;
}
.el-breadcrumb__item:hover ::v-deep .el-breadcrumb__inner {
background-color: lightgreen;
}
/* 不被选中时的颜色 */
.el-breadcrumb ::v-deep .el-breadcrumb__inner {
color:#2c3e50 !important;
}

/* 被选中时的颜色 */
.el-breadcrumb__item.active ::v-deep .el-breadcrumb__inner {
color: lightsalmon !important;
}


</style>
